<!--
 * @Author: 刘程琳 2796055305@qq.com
 * @Date: 2025-09-24 15:45:38
 * @LastEditors: 刘程琳 2796055305@qq.com
 * @LastEditTime: 2025-09-28 17:15:18
 * @FilePath: \team-work\am-ui\src\pages\am\order\Repairs.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- 外层容器：控制整个页面背景 -->
  <div class="page-container">
    <!-- 表单主体容器：设置粉紫色背景，突出内容区域 -->
    <div class="one form-container">
      <label style="line-height: 3;" class="el-form-item_label">
        工程设备
      </label>
      <div class="block" style="margin-bottom:15px;">
        <span class="demonstration"></span>
        <el-cascader class="cascader" :props="{label:'name',value:'id'}" :options="EngData" @change="handleChange"></el-cascader>
      </div>
      <label style="line-height: 3;" class="el-form-item_label">
        保修原因
      </label>
      <div style="margin: 10px 0;"></div>
      <el-input clearable type="textarea" placeholder="请输入内容" v-model="params.bill_why" show-word-limit></el-input>
      <div style="line-height: 3;" class="demo-drawer__footer">
        <el-button @click="toSubmit" type="primary">提交</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { get, post, del } from '@/utils/request' // 补充del方法引入，避免toDelete报错
export default {
  data() {
    return {
      filterText: '',
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      params: {},
      EngData: [],
      text: '',
      textarea: ''
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree?.filter(val); // 加可选链，避免tree未定义报错
    }
  },
  computed: {},
  methods: {
    toDelete(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await del('/engineer/deleteById', { id });
        this.$message({ type: 'success', message: '操作成功!' });
        this.params.page = 1;
        this.getEngData();
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消操作' });
      });
    },
    async toSubmit() {
      let res = await post('/workorder/repairOrder', this.params);
      this.$message({ type: 'success', message: res.message });
      this.$router.push({ path: '/am/order/List' });
    },
    handleChange(value) {
      this.params.engineer_id = value[0];
      this.params.device_id = value[1];
    },
    async getEngData() {
      let res = await get('/engineer/findEngineerDeviceTree');
      this.EngData = res.data;
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    }
  },
  created() {
    this.getEngData();
  },
  mounted() { }
};
</script>

<style lang="scss" scoped>
// 1. 页面整体背景（浅粉紫，覆盖全屏）
.page-container {
  background-color: #f9eaf2;
  min-height: 100vh;
  padding: 30px;
}

// 2. 表单主体容器（稍深粉紫，突出内容，搭配圆角）
.form-container {
  background-color: #f0d9e8;
  padding: 25px;
  border-radius: 10px;
  max-width: 800px; // 限制宽度，提升大屏显示体验
  margin: 0 auto; // 水平居中
}

// 3. 优化标签样式（与粉紫色系协调）
.el-form-item_label {
  color: #9d658f;
  font-weight: 500;
  font-size: 14px;
  margin-right: 10px;
}

// 4. 优化级联选择器和文本域背景（白色，保证输入清晰）
::v-deep .el-cascader__input,
::v-deep .el-textarea__inner {
  background-color: #fff;
  border-color: #e0b6d3; // 边框用浅粉紫，贴合整体风格
}

// 原有样式保留并优化
.tree {
  height: calc(100vh - 60px);
  padding-right: 10px;
}

.demo-drawer__footer {
  margin-top: 20px; // 增加间距，避免按钮紧贴文本域
  bottom: auto; // 取消固定定位，随内容流动
  width: auto; // 取消宽度限制
  text-align: left;
}

.cascader {
  width: 100%;
}
</style>